<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>阶段3模块2 homework</title>
    <link rel="stylesheet" href="./css/bootstrap.min.css">
</head>

<body style="padding: 60px">
    <!-- 表格，默认里面给了四条数据 -->
    <table class="table table-hover">
        <caption>
            <!-- 表格标题 -->
            <h2>习题</h2>
            <!-- 按钮 -->
            <div class="form-inline">
                <!-- 启动模态框 -->
                <button class="btn btn-info" data-toggle="modal" data-target="#myModal" id="add">新增</button>
                <button class="btn btn-info" id="bianji">编辑</button>
                <button class="btn btn-info" id="del">删除</button>
                <button class="btn btn-info" id="query">查询</button>

                <input id="sid" class="form-control" type="text" placeholder="按工号查询" />
                <input id="na" class="form-control" type="text" placeholder="按姓名查询" />
            </div>
        </caption>
        <thead>
            <tr>
                <th>序号</th>
                <th>工号</th>
                <th>姓名</th>
                <th>性别</th>
                <th>密码</th>
                <th>年龄</th>
                <th>出生日期</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>
                    <input type="checkbox" />
                </td>
                <td>
                    <label>1001</label>
                </td>
                <td>
                    <label>张三</label>
                </td>
                <td>
                    <label>女</label>
                </td>
                <td>
                    <label>1234</label>
                </td>
                <td>
                    <label>29</label>
                </td>
                <td>
                    <label>1991-1-1</label>
                </td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" />
                </td>
                <td>
                    <label>1002</label>
                </td>
                <td>
                    <label>李四</label>
                </td>
                <td>
                    <label>男</label>
                </td>
                <td>
                    <label>1234</label>
                </td>
                <td>
                    <label>28</label>
                </td>
                <td>
                    <label>1991-2-2</label>
                </td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" />
                </td>
                <td>
                    <label>1003</label>
                </td>
                <td>
                    <label>王五</label>
                </td>
                <td>
                    <label>男</label>
                </td>
                <td>
                    <label>1234</label>
                </td>
                <td>
                    <label>28</label>
                </td>
                <td>
                    <label>1991-3-3</label>
                </td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" />
                </td>
                <td>
                    <label>1004</label>
                </td>
                <td>
                    <label>赵六</label>
                </td>
                <td>
                    <label>男</label>
                </td>
                <td>
                    <label>1234</label>
                </td>
                <td>
                    <label>28</label>
                </td>
                <td>
                    <label>1991-4-4</label>
                </td>
            </tr>
        </tbody>
    </table>
    <!-- 添加模态框 -->
    <div class="modal" id="myModal" data-backdrop="static">
        <!-- 窗口声明 -->
        <div class="modal-dialog">
            <!-- 内容声明 -->
            <div class="modal-content">
                <!-- 1.框的标题 -->
                <div class="modal-header">
                    <button class="close" data-dismiss="modal">
                        <span>&times;</span>
                    </button>
                    <h4 id="mt" class="modal-title">添加信息</h4>
                </div>
                <!-- 2.框内信息 -->
                <div class="modal-boby">
                    <!-- 给form表单添加id属性 -->
                    <form id="f1">
                        <div class="form-group">
                            <label>工号</label>
                            <input type="text" placeholder="请输入工号..." id="wsid" class="form-control" />
                        </div>
                        <div class="form-group">
                            <label>姓名</label>
                            <input type="text" placeholder="请输入姓名..." id="name" class="form-control" />
                        </div>
                        <div class="form-group">
                            <label>性别</label>
                            <input type="text" placeholder="请输入性别..." id="sex" class="form-control" />
                        </div>
                        <div class="form-group">
                            <label>密码</label>
                            <input type="password" placeholder="请输入密码..." id="psw" class="form-control" />
                        </div>
                        <div class="form-group">
                            <label>年龄</label>
                            <input type="text" placeholder="请输入年龄..." id="age" class="form-control" />
                        </div>
                        <div class="form-group">
                            <label>日期</label>
                            <input type="datetime" placeholder="请输入生日..." id="date" class="form-control" />
                        </div>
                    </form>
                </div>
                <!-- 3.框的按钮 -->
                <div class="modal-footer">
                    <button class="btn btn-info" id="sure" data-dismiss="modal">确定</button>
                    <button class="btn btn-info" id="update" data-dismiss="modal">修改</button>
                    <button class="btn btn-default" data-dismiss="modal">取消</button>
                </div>
            </div>
        </div>
    </div>
</body>

<script src="./js/jquery-3.3.1.min.js"></script>
<script src="./js/bootstrap.min.js"></script>
<script>

    //点击某一行，相当于自动点击复选框（动态生成的元素除外）
    $("tbody>tr").click(function () {
        $(this).children("td:first").children("input:first").get(0).click();
    });
    //添加信息校验
    function check() {
        var n = $("#wsid").val();
        var name = $("#name").val();
        var sex = $("#sex").val();
        var psw = $("#psw").val();
        var age = $("#age").val();
        var date = $("#date").val();
        if (n.length <= 0) {
            alert("用户id不能为空");
            return false;
        } else if (name == "") {
            alert("用户名不能为空!");
            return false;
        } else if (sex != "男" && sex != "女") {
            alert("性别只能为男或女");
            return false;
        } else if (psw < 0 || psw.length > 8) {
            alert("密码不为空，且长度大于等于8!");
            return false;
        } else if (age < 0 || age > 125) {
            alert("年龄不合理");
            return false;
        } else if (date < 0) {
            alert("日期不为空!");
            return false;
        }
        return true;
    }
    // 确定添加按钮，动态添加相关信息，用字符串接收，然后追加到tbody里
    $("#sure").click(function () {
        $("#mt").text("添加用户信息")
        if (check()) {
            var a = 0;
            var str = "<tr><td><input type='checkbox'/></td>";
            var sumstr = "";
            sumstr += str;
            var v1 = $("#f1").find("input").each(function () {
                str = "<td><label>" + $(this).val() + "</label></td>";
                if (a == 5) {
                    str = "<td><label>" + $(this).val() + "</label></td></tr>";
                }
                sumstr += str;
                a++;
            });
            $("tbody").append(sumstr);
            // 隔行变色
            var rows = document.getElementsByTagName("tr"); // 通过标签名获得元素对象
            for (var i = 0; i < rows.length; i++) {
                if (i != 0) {
                    if (i % 2 == 0) { // 奇数行增加class bg-info
                        $(rows[i]).addClass("bg-info");
                    }
                    if (i % 2 == 1) { // 偶数行增加class bg-danger
                        $(rows[i]).addClass("bg-danger");
                    }
                }
            }
        }
    });
    //删除按钮，删除被选中的那一行，用remove删除
    $("#del").click(function () {
        $("tbody>tr").find("input:first").each(function () {
            if ($(this).is(":checked") == true) {
                $(this).parents("tr").remove();
            }
        });
    });
    //编辑按钮，先查询出被选那一行的数据用数组存储，然后在模态框里相应位置设值
    $("#bianji").click(function () {
        var ary = new Array(6);
        var i = 0;
        if ($("tbody>tr").find("input:first:checked").length > 1) {
            alert("只能对一个用户信息进行操作");
        }
        $("tbody>tr").find("input:first").each(function () {
            if ($(this).is(":checked") == true) {
                $(this).parents("tr").find("label").each(function () {
                    ary[i] = $(this).text();
                    i++;
                });
                i = 0;
                $("#f1").find("input").each(function () {
                    $(this).prop("value", ary[i]);
                    i++;
                });
                $("#add").click();
            }
        });
    });
    //更新按钮，先查询出被选那一行的数据用数组存储，然后在模态框里相应位置设值，然后进行改动，保存
    $("#update").click(function () {
        var ary = new Array(6);
        var i = 0;
        $("#f1").find("input").each(function () {
            ary[i] = $(this).val();
            i++;
        });
        i = 0;
        $("tbody>tr").find("label:first").each(function () {
            if ($(this).text() == $("#f1>div:first>input").val()) {
                $(this).parents("tr").find("label").each(function () {
                    $(this).html(ary[i]);
                    i++;
                });
            }
        });
    });
    // 根据工号和姓名查询员工信息
    $("#query").click(function () {

        var ary = new Array(6);
        var i = 0;
        var sid = $("#sid").val(); // 获取工号
        var name = $("#na").val(); // 获取姓名
        if (sid.length > 0) {
            $("tbody").find("tr").find("label:first").each(function () {
                if (sid == $(this).text()) {
                    $(this).parents("tr").find("label").each(function () {
                        ary[i] = $(this).text();
                        i++;
                    });
                    i = 0;
                    $("#f1").find("input").each(function () {
                        $(this).prop("value", ary[i]);
                        i++;
                    });
                    $("#add").click();
                }
            });
        } else if (name.length > 0) {
            $("tbody").find("tr").find("td:first").each(function () {
                if (name == $(this).next().next().text().trim()) {
                    $(this).parents("tr").find("label").each(function () {
                        ary[i] = $(this).text();
                        i++;
                    });
                    i = 0;
                    $("#f1").find("input").each(function () {
                        $(this).prop("value", ary[i]);
                        i++;
                    });
                    $("#add").click();
                }
            });
        }
    });
    // 隔行变色
    var rows = document.getElementsByTagName("tr"); // 通过标签名获得元素对象
    for (var i = 0; i < rows.length; i++) {
        if (i != 0) {
            if (i % 2 == 0) { // 奇数行增加class bg-info
                $(rows[i]).addClass("bg-info");
            }
            if (i % 2 == 1) { // 偶数行增加class bg-danger
                $(rows[i]).addClass("bg-danger");
            }
        }
    }
</script>

</html>